<template>
  <el-dialog
    title="编辑奖品"
    v-model="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
    :before-close="dialogFormVisible"
    :close-on-press-escape="false"
  >
    <el-form size="small" ref="form" :model="form">
      <el-form-item
        label="奖品"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '' }]"
        prop="name"
      >
        <el-radio-group v-model="form.type" @change="changeType">
          <el-radio :label="0">未中奖</el-radio>
          <el-radio :label="1">优惠券</el-radio>
          <el-radio :label="3">商品</el-radio>
          <el-radio :label="2">积分</el-radio>
          <el-radio :label="4">余额</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.type == 3"
        label="商品"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请选择商品' }]"
        prop="awardId"
      >
        <div class="d-s-c">
          <el-button type="primary" @click="isProduct = true" size="small"
            >选择商品</el-button
          >
          <el-icon color="#67c23a" size="18" v-if="form.awardId">
            <CircleCheckFilled />
          </el-icon>
        </div>
        <div class="gray9">只能选择单规格商品</div>
      </el-form-item>
      <el-form-item
        v-if="form.type == 1"
        label="优惠券"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请选择优惠券' }]"
        prop="awardId"
      >
        <div class="d-s-c">
          <el-button type="primary" @click="open_add = true" size="small"
            >选择优惠券</el-button
          >
          <el-icon color="#67c23a" size="18" v-if="form.awardId">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </el-form-item>
      <el-form-item
        v-if="form.type == 2"
        label="积分"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入积分' }]"
        prop="points"
      >
        <el-input
          type="number"
          min="0"
          v-model="form.points"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="form.type == 4"
        label="余额"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入余额' }]"
        prop="balance"
      >
        <el-input
          type="number"
          min="0"
          v-model="form.balance"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="奖品名称"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入奖品名称' }]"
        prop="name"
      >
        <el-input v-model="form.name" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item
        label="奖品图片："
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请上传奖品图片' }]"
        prop="image"
      >
        <div class="draggable-list">
          <div class="item" v-if="form.image">
            <img v-img-url="form.image" />
            <a
              href="javascript:void(0);"
              class="delete-btn"
              @click.stop="deleteImg(index)"
            >
              <el-icon>
                <CloseBold />
              </el-icon>
            </a>
          </div>
          <div v-else class="item img-select" @click="openUpload()">
            <el-icon>
              <Plus />
            </el-icon>
          </div>
        </div>
        <div class="gray9">建议上传尺寸相同的图片，建议尺寸比例为1:1</div>
      </el-form-item>
      <el-form-item
        label="奖品数量"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入奖品数量' }]"
        prop="stock"
      >
        <el-input v-model="form.stock" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item
        label="奖品权重"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入奖品权重' }]"
        prop="weight"
      >
        <el-input
          type="number"
          @input="openWeight"
          min="0"
          max="100"
          v-model="form.weight"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="提示语"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请输入提示语' }]"
        prop="prompt"
      >
        <el-input v-model="form.prompt" class="max-w460"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading"
          >确 定</el-button
        >
      </div>
    </template>
  </el-dialog>
  <Upload
    v-if="isUpload"
    :config="config"
    :isupload="isUpload"
    @returnImgs="returnImgsFunc"
    >上传图片
  </Upload>
  <!--选择商品-->
  <Product
    :specType="10"
    :isProduct="isProduct"
    :excludeIds="exclude_ids"
    :islist="false"
    @closeDialog="closeProductFunc"
  >
  </Product>
  <GetCoupon
    v-if="open_add"
    :open_add="open_add"
    @closeDialog="closeProductDialogFunc($event)"
  ></GetCoupon>
</template>
<script>
import Upload from "@/components/file/Upload.vue";
import Product from "@/components/product/Product.vue";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
import { verifiyNumberInteger } from "@/utils/DateTime.js";
export default {
  components: {
    Upload,
    Product,
    GetCoupon,
  },
  data() {
    return {
      isUpload: false,
      config: {},
      loading: false,
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      form: {
        awardId: "",
        name: "",
        image: "",
        stock: "",
        weight: "",
        prompt: "",
        points: "",
        balance: "",
      },
      exclude_ids: [],
      /*是否打开选择商品*/
      isProduct: false,
      open_add: false,
    };
  },
  props: ["model"],
  created() {
    console.log(this.model);
    if (!this.model.type) {
      this.model.type = 0;
    }
    this.form = this.model;
    this.dialogVisible = true;
  },
  methods: {
    openWeight(value) {
      let m = verifiyNumberInteger(value);
      this.form.weight = m > 100 ? 100 : m;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      self.open_add = e.openDialog;
      if (e.type == "success") {
        self.form.awardId = e.params.couponId;
        self.form.name = e.params.name;
      }
    },
    changeType(e) {
      this.form.prizeId = 0;
      this.form.awardId = 0;
      // this.form.name = '';
      // this.form.image = '';
      this.form.points = "";
      this.form.balance = "";
    },
    /*打开上传图片*/
    openUpload: function () {
      this.config = {
        total: 1,
        fileType: "image",
      };
      this.isUpload = true;
    },
    deleteImg(index) {
      this.form.image = "";
    },
    /*上传商品图片*/
    returnImgsFunc(e) {
      if (e != null) {
        let imgs = (this.form.image = e[0].filePath);
        this.form.image = imgs;
      }
      this.isUpload = false;
    },
    /*添加商品*/
    addProduct() {
      this.isProduct = true;
    },
    /*关闭商品*/
    closeProductFunc(e) {
      let self = this;
      self.isProduct = e.openDialog;
      if (e.type == "success") {
        console.log(e);
        self.form.awardId = e.params.productId;
        self.form.name = e.params.productName;
        self.form.image = e.params.imagePath;
      }
    },
    /*处理*/
    submit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("closeDialog", {
            type: "success",
            openDialog: false,
            form: form,
          });
        }
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      this.$emit("closeDialog", {
        type: "error",
        openDialog: false,
      });
    },
  },
};
</script>
<style></style>
